<template>
  <div class="homeTopRightBottom">
    <div class="title">
      <img src="../../../assets/titleIcon.png" alt="">
      <span>企业注册分布</span>
    </div>
    <div class="trBottomBox" ref="eBox">

    </div>
  </div>

</template>
<script>
  export default {
    data() {
      return {
        myChart: null,
      }
    },
    created() {

    },
    computed: {

    },
    mounted() {
      this.init()
      window.addEventListener("resize", this.resize);
    },
    methods: {
      resize() {
        this.myChart && this.myChart.resize();
      },
      init() {
        this.myChart = echarts.init(this.$refs.eBox);
        let option = {
          color: ['#7eacea', '#e15777', '#95ea71', '#ea9b4f', '#7577df', '#be72d8', '#fff'],
          tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b} : {c} ({d}%)'
          },
          series: [{
            name: '统计',
            type: 'pie',
            radius: [20, 90],
            center: ['50%', '50%'],
            roseType: 'radius',
            label: {
              show: true,
              formatter: '{b}',
            },
            emphasis: {
              label: {
                show: true
              }
            },
            data: [{
                value: 25,
                name: 'rose1'
              },
              {
                value: 20,
                name: 'rose2'
              },
              {
                value: 15,
                name: 'rose3'
              },
              {
                value: 10,
                name: 'rose4'
              },
              {
                value: 8,
                name: 'rose5'
              },
              {
                value: 3,
                name: 'rose6'
              },
            ]
          }, {
            name: '占位',
            type: 'pie',
            silent: true,
            center: ['50%', '50%'],
            radius: 20,
            hoverAnimation: false,
            label: {
              show: false,
              position: 'center'
            },
            data: [{
                value: 1,
                name: '占位2'
              },

            ],
            itemStyle: {

              normal: {
                color: '#fff',
                shadowColor: 'rgba(0, 0, 0, 0.5)',
                shadowBlur: 10,
              },
            }
          }, ]
        };
        this.myChart.setOption(option);
      }
    },
    beforeDestroy() {
      window.removeEventListener("resize", this.resize);
    },
  }

</script>
<style lang="less" scoped>
  .homeTopRightBottom {
    width: 100%;
    height: 100%;
    padding: 2vh 1.85vw;
    background: #FFFFFF;

    .title {
      width: 100%;
      height: 5vh;
      display: flex;
      align-items: center;
      border-bottom: 1px solid rgba(162, 170, 174, 0.2);

      img {
        width: .8vw;
        height: 1.5vh;
        margin-right: .5vw;
      }

      span {
        font-size: .8vw;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: rgba(17, 17, 17, 0.7);
      }
    }

    .trBottomBox {
      width: 100%;
      height: 37vh;
    }
  }

</style>
